<template>
  <scale-box>
    <div class="index-map" >
      <Header :title="title"></Header>
      <div class="container">
        <div class="map">
          <div class="arr" v-for="(arr, index) in dataArray" :key="index">
            <div class="item" v-for="(item, index) in arr" :key="index" @click="clickHandle(item)">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
  </scale-box>
</template>

<script>

import Header from '../components/Header.vue'
import MapIndex from '../components/MapIndex.vue'
import router from "@/router";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import pageData from "@/assets/js/pageData";
export default {
  name: "indexMap",
  components: {
    ScaleBox,
    Header,
    MapIndex
  },
  data() {
    return {
      title: "石家庄220kV古城变",
      dataArray: [
        [
          '主接线图',
          '271线路分图',
          '272线路分图',
          '273线路分图',
          '274线路分图',
          '275线路分图',
          '276线路分图',
          '201母联分图',
          '203分段分图',
          '220kV母线分图',
        ],
        [
        "#1主变分图",
          "#2主变分图",
          "173线路分图",
          "174线路分图",
          "175线路分图",
          "176线路分图",
          "177线路分图",
          "178线路分图",
          "179线路分图",
          "110kV分段分图",
          "110kV母线分图",
        ],
        [
        "10kV电抗器510分图",
          "10kV电抗器520分图",
          "10kV电抗器530分图",
          "10kV电抗器540分图",
          "10kV电抗器550分图",
          "10kV电抗器560分图",
          "10kV#1接地变分图",
          "10kV#2接地变分图",
          "10kV#1站用变分图",
          "10kV#2站用变分图",
        ],
        [
          "10kV分段501分图",
          "10kV母线分图",
          "主变油色谱在线监测",
          "避雷器在线监测",
          "低周减载分图",
          "消弧线圈分图",
          "全站公用信号分图",
          "一体化电源分图",
          "四遥一览表",
          "通信状态表",
        ]
      ],
    };
  },
  methods: {
    clickHandle(item) {
      const lineMatch = item.match(/^(\d+)线路分图$/);
      const mainMatch = item.match(/^#(\d+)主变分图$/);
      const motherMatch = item.match(/^(\d+)kV母线(?:及公用)?分图$/);
      const pushRoute = (path, ftCode) => {
        const data = pageData.find(d => d.ftCode == ftCode);
        if (!data) return;
        this.$router.push({
          path,
          query: {
            ftIndex: data.ftIndex,
            jgName: data.jgName,
            ftName: data.ftName
          }
        });
      };
      if (item === '主接线图') {
        this.$router.push('/mainPage');
        return;
      }
      if (lineMatch) {
        const ftCode = lineMatch[1];
        const path = ftCode.startsWith('2') ? '/breakPage'
          : ftCode.startsWith('1') ? '/page-110kV'
            : null;
        if (path) pushRoute(path, ftCode);
        return;
      }
      if (mainMatch) {
        const ftCode = mainMatch[1] + 'zb';
        pushRoute('/zhubian', ftCode);
        return;
      }
      if (motherMatch){
        const ftCode = motherMatch[1] + 'mx';
        pushRoute('/muxianPage', ftCode);
        return;
      }
    }

  },
  computed: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.index-map {
  width: 1920px;
}
.container {
  display: flex;
  margin: 50px;
  padding: 30px;
  height: 750px;
  border: 1px solid #fff;
  color: #4f545b;
  .map {
    display: flex;
   justify-content: space-between;
    width: 100%;
    margin: 0 30px;
    .arr {
      width: 18%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: 1.5rem;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 15px;

      /* 浅色按钮，在黑底上明显 */
      background: linear-gradient(to bottom, rgb(120,149,160), #ffffff);

      color: #222; /* 默认深色文字，对比明显 */
      transition: all 0.3s ease;
    }

    .item:hover {
      color: #fff; /* 悬停时变纯白 */
      text-shadow: 0 0 8px rgba(255,255,255,0.8); /* 白色发光效果 */

      transform: translateY(0px) scale(1.14);
      box-shadow: 0 10px 18px rgba(0,0,0,0.25);
    }

    .item:active {
      transform: translateY(1px) scale(0.96);
      box-shadow: 0 4px 8px rgba(0,0,0,0.18);
    }


  }
}
</style>
